<template>
  <div class="accountLogin">
    <!--账号-->
    <div class="account">
      <Input
        type="text"
        v-model="account"
        placeholder="请输入手机号/邮箱"
        size="large"
        clearable
        prefix="ios-contact-outline"/>
    </div>

    <!--密码-->
    <div class="pwd">
      <Input
        type="password"
        v-model="password"
        placeholder="请输入密码"
        size="large"
        clearable
        password
        prefix="ios-lock-outline"
        @on-enter="enter"/>
    </div>

    <!--登录注册-->
    <div class="box">
      <div class="top">
        <!--左侧【记住密码】-->
        <div class="left">
          <Checkbox v-model="keepPwd">记住密码</Checkbox>
        </div>
        <!--右侧【忘记密码】-->
        <div class="right" @click="forgetPwd">
          忘记密码?
        </div>
      </div>

      <!--登录按钮-->
      <div class="bottom">
        <Button
          type="success"
          size="large"
          html-type="button"
          style="width: 100%"
          @click="login">
          登录
        </Button>
      </div>
    </div>

    <!--去注册-->
    <div class="register">
      <div>
        <div @click="intoRegister">去注册 ></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bus from "@/tools/bus"
  import {
    checkIphoneNo,
    checkEmail,
    checkStrIsNull
  } from "../../tools/checkAccount";
  import {
    setCookie
  } from "@/tools/cookie";
  import store from "../../tools/store";

  export default {
    name: "",
    components: {},
    data() {
      return {
        //账号
        account: "",
        //手机号
        iphoneNo: "",
        //邮箱
        userEmail: "",
        //密码
        password: "",
        //记住密码
        keepPwd: true
      }
    },
    methods: {
      //账号失焦，校验账号
      checkAccount: function () {
        let strIsNull = checkStrIsNull(this.account);
        //校验是否是规范的手机号 邮箱号
        let b1 = checkIphoneNo(this.account);
        let b2 = checkEmail(this.account);

        if (strIsNull) {
          this.$Notice.error({
            title: "请输入账号!"
          });
          return false;
        } else if (!b1 && !b2) {
          this.$Notice.error({
            title: "账号格式错误!"
          });
          return false;
        } else {
          return true;
        }
      },
      //密码输入框，失焦
      checkPwd: function () {
        let isNull = checkStrIsNull(this.password);
        if (isNull) {
          this.$Notice.error({
            title: "请输入密码!"
          });
          return false;
        }
        return true;
      },
      //忘记密码
      forgetPwd: function () {
        this.$router.push("/resetPwd");
      },
      //enter
      enter: function () {
        this.login()
      },
      //登录
      login: function () {
        //校验账号
        let b1 = this.checkAccount();
        //校验密码
        let b2 = this.checkPwd();
        if (!b1 || !b2) {
          return false;
        }
        let data = {
          account: this.account,
          /**
           * Base64.encode("需要加密字符串")
           * Base64.decode("需要解密字符串")
           * this.Md5("需要加密的字符串")   Md5 不能解密
           */
          po: Base64.encode(this.password),
          pc: this.Md5(this.password)
        }
        this.axios.post(`/login/login/loginUser`, data)
          .then(resp => {
            //错误提示
            if (!resp.data.flag) {
              if (resp.data.code == 20002) {
                this.$Notice.error({
                  title: "该账号还未注册或绑定"
                });
                this.$router.push("/register");
              } else if (resp.data.code == 20003) {
                this.$Notice.error({
                  title: "账号或密码错误"
                });
              }
            }
            //如果成功
            if (resp.data.flag) {
              //响应数据
              let respData = resp.data.data;
              //设置本地token
              let token = respData.token;
              //设置本地用户
              let webUser = respData.webUser;
              //将后台的数据前端本地化，后台修改字段，前台只要修改这里即可
              let user = {
                userId: webUser.webUserId,
                userName: webUser.userName,
                iphoneNo: webUser.iphoneNo,
                userEmail: webUser.userEmail,
                headPortrait: webUser.headPortrait,
              }
              //将用户对象信息 字符串化
              let userInfo = JSON.stringify(user);
              //存到本地
              window.sessionStorage.setItem("isLogin", true);
              window.sessionStorage.setItem("token", token);
              window.sessionStorage.setItem("userInfo", userInfo);

              //如果记住密码，保存到cookie
              if (this.keepPwd) {
                setCookie("isLogin", true);
                setCookie("token", token);
                setCookie("userInfo", userInfo);
              }
              //存到Vuex
              this.Store.commit("setIsLogin", true);
              this.Store.commit("setToken", token);
              this.Store.commit("setUserInfo", userInfo);
              this.Store.commit("setUserId", user.userId);
              //刷新 app
              this.Bus.$emit("my-event-app-load", true);
              //跳转到首页
              this.$router.push("/");
            }
          })
      },
      //去注册
      intoRegister: function () {
        this.$router.push("/register");
      }
    }
  }
</script>

<style scoped>
  /*盒子设置*/
  .accountLogin {
    width: 94%;
    margin: 14px auto 0px;
  }

  /*账号*/
  .accountLogin .account {

  }

  /*密码*/
  .accountLogin .pwd {
    margin-top: 14px;
  }

  /*登录 【记住密码】【忘记密码】*/
  .accountLogin .box {
    margin-top: 16px;
  }

  /*左侧*/
  .box .top .left {
    float: left;
  }

  /*右侧*/
  .box .top .right {
    float: right;
    font-size: 14px;
    color: #888888;
    cursor: pointer;
  }

  /*登录按钮*/
  .box .bottom {
    padding-top: 36px;
  }

  /*去注册*/
  .accountLogin .register div {
    height: 40px;
  }

  /*去注册*/
  .accountLogin .register div div {
    height: 20px;
    width: 66px;
    float: right;
    font-size: 14px;
    line-height: 20px;
    color: #FF0000;
    text-align: right;
    margin-top: 14px;
    padding-right: 4px;
  }
</style>
